<template>
  <div style="height: 100%; width: 100%; position: relative" ref="maindev">
      <div class="pagetop">
          <div style="width: 100%">
              <table style="font-size: 12px; white-space: nowrap" border="0" class="table1style">
                  <tr>
                      <td align="right">报告日期</td>
                      <td style="width: 280px">
                          <table style="border-spacing: 0px; width: 100%">
                              <tr>
                                  <td style="padding: 0px">
                                      <el-date-picker v-model="txtstartdate" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%; min-width: 100px" :picker-options="pickerOptions" :clearable="false" :key="startkey"> </el-date-picker>
                                  </td>
                                  <td>至</td>
                                  <td style="padding: 0px">
                                      <el-date-picker v-model="txtenddate" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%; min-width: 100px" :picker-options="pickerOptions" :clearable="false" :key="endkey"> </el-date-picker>
                                  </td>
                              </tr>
                          </table>
                      </td>
                      <td align="right">检验科室</td>
                      <td>
                          <rm-ddl-common datatype="labdept" dataname="检验科室" v-model="labdeptval" width="100%" @change="labdeptChange"></rm-ddl-common>
                      </td>
                      <td align="right">样本类型</td>
                      <td>
                          <rm-ddl-common datatype="specimen" dataname="样本类型" v-model="specimencode" size="mini" width="100%" @change="specimenChange"></rm-ddl-common>
                      </td>
                      <td style="width: 80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_rptunitid" @change="chkevent($event, 'chk_rptunitid', '报告单元')">报告单元</el-checkbox>
                      </td>
                      <td style="width: 80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_specimen_code" @change="chkevent($event, 'chk_specimen_code', '样本类型')">样本类型</el-checkbox>
                      </td>
                      <td style="width: 40px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_years" @change="chkevent($event, 'chk_years', '年')">年</el-checkbox>
                      </td>
                      <td style="width: 80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_report_user" @change="chkevent($event, 'chk_report_user', '检验者')">检验者</el-checkbox>
                      </td>
                  </tr>
                  <tr>
                      <td align="right">报告单元</td>
                      <td>
                          <rm-ddl-rptunit prgno="LIS440" v-model="rptunit" width="100%" clearable @change="rptunitChange"></rm-ddl-rptunit>
                      </td>
                      <td align="right">检验组</td>
                      <td>
                          <rm-ddl-common v-model="labgroupid" clearable filterable :appendtobody="true" visible-change:true datatype="labgroup" dataname="检验组" width="100%" @change="labgroupChange"></rm-ddl-common>
                      </td>
                      <td align="right">病人类型</td>
                      <td>
                          <rm-ddl-common datatype="seccode" kindno="PT" dataname="病人类型" v-model="pattype" width="200px" key="pt" @change="pattypeChange"></rm-ddl-common>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_labgroupid" @change="chkevent($event, 'chk_labgroupid', '检验组')">检验组</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_pat_typecode" @change="chkevent($event, 'chk_pat_typecode', '病人类型')">病人类型</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_months" @change="chkevent($event, 'chk_months', '月')">月</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_rechk_user" @change="chkevent($event, 'chk_rechk_user', '审核者')">审核者</el-checkbox>
                      </td>
                  </tr>
                  <tr>
                      <td align="right">报告单元组合</td>
                      <td>
                          <el-select v-model="unitgroup" @dblclick.native="popMultipleChk(unitgroup, 'unitgroup', rptunitGroupOption, '单元组合选择')" style="width: 100%" filterable clearable>
                              <el-option v-for="(item, index) in rptunitGroupOption" :key="index" :value="item.data" :label="item.display"> </el-option>
                          </el-select>
                      </td>
                      <td align="right"></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_labdeptcode" @change="chkevent($event, 'chk_labdeptcode', '检验科室')">检验科室</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chk_emer_flag" @change="chkevent($event, 'chk_emer_flag', '急诊标志')">急诊标志</el-checkbox>
                      </td>
                      <td><el-checkbox true-label="1" false-label="0" v-model="chklist.chk_days" @change="chkevent($event, 'chk_days', '日')">日</el-checkbox></td>
                      <td></td>
                  </tr>
                  <tr>
                      <td></td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="isemergency">急诊</el-checkbox>
                          <el-checkbox true-label="1" false-label="0" v-model="isexamed">仅统计已审核报告</el-checkbox>
                      </td>
                      <td colspan="2">
                          <el-checkbox true-label="1" false-label="0" v-model="ischecked">剔除复查的记录</el-checkbox>
                          <!-- <el-checkbox true-label="1" false-label="0" v-model="isreasonnull">剔除待查原因不为空的记录</el-checkbox> -->
                      </td>
                      <td></td>
                      <td></td>
                  </tr>
              </table>
              <div class="operation-list">
                  <el-button @click.native="BtnQuery" v-has="'PINQUERY'" type="primary" icon="el-icon-search">查询</el-button>
                  <el-button @click.native="BtnClear" icon="el-icon-close">清除</el-button>
                  <el-button @click.native="BtnExport" icon="el-icon-download">导出</el-button>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table :data.sync="tableData" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :key="xTablekey" show-footer :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName" :loading="xTableLoading">
                  <vxe-table-column type="index" title="NO." width="50" header-align="center" align="center"></vxe-table-column>
                  <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in tableColumn" :formatter="formatFun"></vxe-table-column>
                  <vxe-table-column field="total_count" sortable title="样本数" width="70" header-align="center" align="right"></vxe-table-column>
                  <vxe-table-column field="delay_count" sortable title="超时数" width="70" header-align="center" align="right"></vxe-table-column>
                  <vxe-table-column field="delay_rate" sortable title="超时率%" width="70" header-align="center" align="right"></vxe-table-column>
              </vxe-table>
          </div>
      </div>

      <!--多选弹窗--->
      <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
          <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "LIS631",
  data() {
      const _that = this;
      return {

          dialogMultipleVisible: false,
          xTableLoading: false,
          option1: [],
          option2: [],
          fieldname: "",
          tableColumn: [],
          tableData: [],
          tableData1: [],
          showseq: 1,
          currRowIndex: 0,
          xTablekey: 0,
          datename: "标本日期",
          multichktitle: "",
          datecode: "sam",
          txtstasticsmod: "", //弹窗统计模版
          stasticsmodOption: [], //统计模版列表
          txtquerymod: "", //查询模版
          querymodOption: [], //查询模版列表
          pattypeOption: [],
          labdeptOption: [],
          wardOption: [],
          hospOption: [],
          doctorOption: [],
          rptunitOption: [],
          rptunitGroupOption: [],
          reportcommOption: [],
          labgroupOption: [],
          infocode: "",
          infoitem: "",
          //以下为查询条件
          labdeptval: "", // 检验科室
          specimencode: "", //标本类型
          rptunit: "", // 报告单元
          pattype: "", // 病人类型
          labgroupid: "", // 检验组
          unitgroup: "", //报告单元组合
          isemergency: false, // 是否急诊
          isexamed: false, //仅统计已审核报告
          ischecked: false, //剔除复查的记录
          isreasonnull: false, //剔除待查原因不为空的记录
          //以下为统计项目
          chklist: {
              chk_rptunitid: false,
              chk_specimen_code: false,
              chk_years: false,
              chk_report_user: false,
              chk_labgroupid: false,
              chk_pat_typecode: false,
              chk_months: false,
              chk_rechk_user: false,
              chk_labdeptcode: false,
              chk_emer_flag: false,
              chk_days: false,
          },
          txtstartdate: new Date(),
          txtenddate: new Date(),
          rcvstatisticstyle: "",
          userno: this.$tool.getSession(this.$tool.loginuserno),
          chkcnt: 0,
          startkey: 0,
          endkey: 0,
          pickerOptions: {
              shortcuts: [
                  {
                      text: "今天",
                      onClick(picker) {
                          picker.$emit("pick", new Date());
                          _that.txtstartdate = new Date();
                          _that.txtenddate = new Date();
                      },
                  },
              ],
          },
          labdeptname: "",
          specimenname: "",
          rptunitname: "",
          labgroupname: "",
          pattypename: "",
          exportTableColLen: 0,
      };
  },
  created() {
      this.initOption();
  },
  mounted() {},
  updated() {},
  methods: {
      popMultipleChk(e, fieldname, option, title) {
          let temp = XEUtils.clone(option, true);
          this.option1 = [];
          this.option2 = [];
          if (e != "") {
              let k = e.split(",");
              k.forEach((item) => {
                  let ndata = temp.find((m) => m.data == item);
                  if (ndata != undefined && ndata != null) {
                      this.option2.push(ndata);
                  }
              });
              temp.forEach((item) => {
                  if (k.indexOf(item.data + "") < 0) {
                      this.option1.push(item);
                  }
              });
          } else {
              this.option1 = temp;
          }
          this.fieldname = fieldname;
          this.multichktitle = title;
          this.dialogMultipleVisible = true;
      },
      closedialog(value, name) {
          if (value != "close") {
              this[name] = value;
          }
          this.dialogMultipleVisible = false;
      },

      currentChangeEvent1({ row, $rowIndex }) {
          this.currRowIndex = $rowIndex;
      },
      async initOption() {
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS6/LIS631",
                  method: "post",
                  data: {
                      action: "initOption",
                  },
              });

              this.pattypeOption = res.pattypeOption;
              this.labdeptOption = res.labdeptOption;
              this.rptunitOption = res.rptunitOption;
              this.labgroupOption = res.labgroupOption;
              this.specimenOption = res.specimenOption;
              this.rptunitGroupOption = res.rptunitGroupOption;
          } catch (e) {
              this.$message.warning(e);
          }
      },
      BtnQuery() {
          this.InitPage();
      },

      BtnClear() {
          console.info("3222222222222");
          this.labdeptval = "";
          this.specimencode = "";
          this.rptunit = "";
          this.pattype = "";
          this.labgroupid = "";
          this.unitgroup = "";
          this.isemergency = false;
          this.isexamed = false;
          this.ischecked = false;
          this.isreasonnull = false;

          this.infoitem = "";
          this.infocode = "";
          this.tableData = [];
          this.chklist = {
              chk_rptunitid: false,
              chk_specimen_code: false,
              chk_years: false,
              chk_report_user: false,
              chk_labgroupid: false,
              chk_pat_typecode: false,
              chk_months: false,
              chk_rechk_user: false,
              chk_labdeptcode: false,
              chk_emer_flag: false,
              chk_days: false,
          };
          this.chkcnt = 0;
      },
      chkevent(e, code, name) {
          console.info("11111111111111111");
          //alert(this.chkcnt);
          if (e == "1") {
              if (this.chkcnt <= 7) {
                  this.chkcnt++;
                  if (this.infocode.indexOf(code) == -1) {
                      this.infocode += code + ",";
                      this.infoitem += name + ",";
                  }
              } else {
                  this.$alert("不能选择更多的分组！", "提示");
                  this.chklist[code] = false;
                  //console.log(this, this[code]);
              }
          } else {
              if (this.infocode.indexOf(code) > -1) {
                  this.chkcnt--;
                  this.infocode = this.infocode.replace(code, "");
                  this.infoitem = this.infoitem.replace(name, "");
              }
          }
      },

      async InitPage() {
          try {
              if (this.chkcnt < 1) {
                  this.$alert("请勾选右边分组条件！", "信息");
                  return false;
              }
              this.xTableLoading = true;
              const response = await this.$tool.request({
                  url: "LIS/LIS6/LIS631",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "queryData",
                      startdate: this.txtstartdate, //标本开始日期
                      enddate: this.txtenddate, //标本结束日期
                      labdeptval: this.labdeptval, // 检验科室
                      specimencode: this.specimencode, //标本类型
                      rptunit: this.rptunit, // 报告单元
                      pattype: this.pattype, // 病人类型
                      labgroupid: this.labgroupid, // 检验组
                      unitgroup: this.unitgroup, //报告单元组合
                      isemergency: this.isemergency == true ? "1" : "0", // 是否急诊
                      isexamed: this.isexamed == true ? "1" : "0", //仅统计已审核报告
                      ischecked: this.ischecked == true ? "1" : "0", //剔除复查的记录
                      isreasonnull: this.isreasonnull == true ? "1" : "0", //剔除待查原因不为空的记录
                      infocode: this.infocode, //要查询的列数
                      infoitem: this.infoitem,
                  },
              });
              if (!!response.RData.Data) {
                  this.tableColumn = response.RData.Cols;
                  this.tableData = response.RData.Data;
                  this.xTableLoading = false;
              } else {
                  // this.InitPage();
                  this.$message.warning("查询超时,可以尝试缩短签收日期或减少分组条件！");
                  this.xTableLoading = false;
              }
          } catch (e) {
              this.xTableLoading = false;
              this.$alert(e, "消息");
          }
      },
      formatFun({ cellValue, column, row }) {
          return this.retForamtVal(cellValue, column.property);
      },
      retForamtVal(cellValue, column) {
          if (["labdeptcode"].includes(column)) {
              try {
                  //科室
                  let deptname = this.labdeptOption.find((m) => m.data == cellValue);
                  if (deptname != undefined && deptname != null) {
                      return deptname.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "pat_typecode") {
              // 病人类型
              try {
                  let pattypename = this.pattypeOption.find((m) => m.data == cellValue);
                  if (pattypename != undefined && pattypename != null) {
                      return pattypename.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "labgroupid") {
              //检验工作组
              try {
                  let labgroup = this.labgroupOption.find((m) => m.data == cellValue);
                  if (labgroup != undefined && labgroup != null) {
                      return labgroup.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "rptunitid") {
              // 报告单元
              try {
                  let labgroup = this.rptunitOption.find((m) => m.data == cellValue);
                  if (labgroup != undefined && labgroup != null) {
                      return labgroup.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "specimen_code") {
              // 样本类型
              try {
                  let specimen = this.specimenOption.find((m) => m.data == cellValue);
                  if (specimen != undefined && specimen != null) {
                      return specimen.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "emer_flag") {
              if (cellValue == "1") {
                  return "急";
              } else {
                  return "非急";
              }
          } else {
              return cellValue;
          }
      },
      footerCellClassName({ $rowIndex, column, columnIndex }) {
          if (columnIndex === 0 || ["total_count", "delay_count", "delay_rate"].includes(column.property)) {
              if ($rowIndex === 0) {
                  return "col-blue";
              } else {
                  return "col-red";
              }
          }
      },

      footerMethod({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "总计";
                  }
                  if (["total_count", "delay_count"].includes(column.property)) {
                      return XEUtils.sum(data, column.property);
                  }

                  if (["delay_rate"].includes(column.property)) {
                      if (this.tableData.length > 0) return Number((this.SumAll(this.tableData, "delay_count") / this.SumAll(this.tableData, "total_count")) * 100).toFixed(2) + "%";
                      else return "0%";
                  }

                  return null;
              }),
          ];
      },

      SumAll(data, property) {
          var plus = 0;
          if (data) {
              for (let i = 0, len = data.length; i < len; i++) {
                  plus += data[i][property] - 0;
              }
          }

          return plus;
      },
      labdeptChange(code, name) {
          this.labdeptval = code;
          this.labdeptname = name;
      },
      specimenChange(code, name) {
          this.specimencode = code;
          this.specimenname= name;
      },
      rptunitChange(code, name) {
          this.rptunit = code;
          this.rptunitname = name;
      },
      labgroupChange(code, name) {
          this.labgroupid = code;
          this.labgroupname = name;
      },
      pattypeChange(code, name) {
          this.pattype = code;
          this.pattypename = name;
      },
      //导出
      BtnExport() {
          let data = this.getExportData();
          let filtertxt = this.getExportFilter();
          this.$pub.exportTableExcelWithData(data, this.exportTableColLen, "LIS631 报告延迟发放统计.xlsx", filtertxt, "统计条件：");
      },
      // 获取当前导出文件的所有查询条件
      getExportFilter() {
          let filtertxt = "报告日期:" + XEUtils.toDateString(this.txtstartdate, "yyyy-MM-dd") + "至" + XEUtils.toDateString(this.txtenddate, "yyyy-MM-dd") + "; ";
          if(this.labdeptval) filtertxt += "检验科室:" + this.labdeptname + "; ";
          if(this.specimencode) filtertxt += "样本类型:" + this.specimenname + "; ";
          if(this.rptunit) filtertxt += "报告单元:" + this.rptunitname+ "; ";
          if(this.labgroupid) filtertxt += "检验组:" + this.labgroupname + "; ";
          if(this.pattype) filtertxt += "病人类型:" + this.pattypename+ "; ";
          if(this.unitgroup) filtertxt += "报告单元组合:" + this.getOptionName(this.rptunitGroupOption.filter((item) =>  ("," + this.unitgroup + ",").indexOf("," + item.data + ",") > -1)) + "; ";
          let tatcoltxt = "";
          if(this.chklist.chk_rptunitid == "1") tatcoltxt += "报告单元、";
          if(this.chklist.chk_specimen_code == "1") tatcoltxt += "样本类型、";
          if(this.chklist.chk_report_user == "1") tatcoltxt += "检验者、";
          if(this.chklist.chk_labgroupid == "1") tatcoltxt += "检验组、";
          if(this.chklist.chk_pat_typecode == "1") tatcoltxt += "病人类型、";
          if(this.chklist.chk_labdeptcode == "1") tatcoltxt += "审核者、";
          if(this.chklist.chk_emer_flag == "1") tatcoltxt += "急诊标志、";
          if(this.chklist.chk_years == "1") tatcoltxt += "年、";
          if(this.chklist.chk_months == "1") tatcoltxt += "月、";
          if(this.chklist.chk_days == "1") tatcoltxt += "日、";
          if(tatcoltxt) filtertxt += "统计项目:" + tatcoltxt.substring(0, tatcoltxt.length - 1) + "; ";
          return filtertxt;
      },
      getOptionName(option) {
          if (option && option.length > 0) {
              let optionname = "";
              option.forEach((item) => {
                  if(item.hasOwnProperty("display")) {
                      optionname += item.display + ",";
                  } else {
                      optionname += item.label + ",";
                  }
              });
              return optionname.substring(0, optionname.length - 1);
          } else {
              return "";
          }
      },
      getExportData() {
          let datas = this.$refs.xTable.afterFullData;
          let exportColumn = XEUtils.clone(this.tableColumn, true);
          exportColumn.push({ title: "样本数", field: "total_count" });
          exportColumn.push({ title: "超时数", field: "delay_count" });
          exportColumn.push({ title: "超时率", field: "delay_rate" });
          this.exportTableColLen = exportColumn.length;
          let columns = exportColumn.filter((item) => item.field);
          let footerData = {};
          columns.forEach((item, index) => {
              if (index === 0) {
                  footerData[item.field] = "总计";
              }
              if (["total_count", "delay_count"].includes(item.field)) {
                  footerData[item.field] = XEUtils.sum(datas, item.field);
              }

              if (["delay_rate"].includes(item.field)) {
                  if (this.tableData.length > 0) footerData[item.field] = Number((this.SumAll(this.tableData, "delay_count") / this.SumAll(this.tableData, "total_count")) * 100).toFixed(2) + "%";
                  else footerData[item.field] = "0%";
              }
          });
          datas.splice(datas.length, 0, footerData);
          let headers = [columns.map((item) => item.title)];
          return headers.concat(
              datas.map((row) => {
                  return columns.map((column) => {
                      return this.retForamtVal(row[column.field], column.field);
                  });
              })
          );
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
  height: 150px;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 155px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
.el-checkbox__label {
  padding: 0px;
}
.left_nav {
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 0px 0px 0px 0px;
  float: left;
  display: inline;
}
.left_nav div {
  cursor: pointer;
  height: 40px;
  width: 100%;
  float: left;
  padding-left: 20px;
  line-height: 40px;
}
.left_nav .active {
  background-color: DeepSkyBlue;
}
.right_nav {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
  display: inline;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
}
::v-deep .mytable-style .vxe-footer--column.col-blue {
  color: blue !important;
  font-weight: bold;
}
::v-deep .mytable-style .vxe-body--row.row-blue {
  color: blue !important;
  font-weight: bold;
}

::v-deep .el-icon-time {
  line-height: 18px !important;
}
::v-deep .el-range__close-icon {
  line-height: 18px !important;
}
::v-deep .el-range-editor--small .el-range-separator {
  line-height: 17px !important;
}
::v-deep .mychkclass .el-checkbox {
  margin-right: 15px;
}
.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 4px 4px 4px 0;
  border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 4px 0 4px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
</style>
